<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>角色统计</title>
</head>
<body>
    <div id="roleBarDiv" style="width: 600px;height:400px;"></div>
    <p>
        <input type="button" value="柱图展示" id="barBtn"/> <input type="button" value="饼图展示" id="pieBtn"/>
    </p>

    <script type="text/javascript" th:src="@{/statics/js/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/statics/js/echarts/echarts.min.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        $(document).ready(function () {
            var myChart = echarts.init(document.getElementById('roleBarDiv')); // 基于准备好的dom，初始化echarts实例
            var option ;
            var roleArray ;
            var countArray ;
            var jsonValue ;

            //异步获取角色统计信息
            function roleFunctionStatistic() {
                $.ajax({
                    type: "post",
                    url: "getRoleFunctiontSatistic",
                    dataType: "json",
                    success: function (result) {
                        roleArray = new Array() ;
                        countArray = new Array() ;

                        var values = "["

                        $.each(result, function (i, res) {
                            roleArray[i] = res.roleName ;
                            countArray[i] = res.funcCount ;

                            values+= "{value:"+res.funcCount+",name:\'"+res.roleName+"\'}," ;
                        })

                        values = values.substring(0, values.lastIndexOf(",")) ;
                        values += "]" ;

                        jsonValue = eval('('+values+')') ;
                        

                        // 指定图表的配置项和数据
                        option = {
                            title: {
                                text: '角色权限统计'
                            },
                            tooltip: {},
                            legend: {
                                data:['数量']
                            },
                            xAxis: {
                                data: roleArray
                            },
                            yAxis: {},
                            series: [{
                                name: '数量',
                                type: 'bar',
                                data: countArray
                            }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                })
            }


            //页面加载完调用函数
            roleFunctionStatistic() ;
            
            
            //单击柱
            $("#barBtn").click(function () {
                // 指定图表的配置项和数据
                option = {
                    title: {
                        text: '角色权限统计'
                    },
                    tooltip: {},
                    legend: {
                        data:['数量']
                    },
                    xAxis: {
                        data: roleArray
                    },
                    yAxis: {},
                    series: [{
                        name: '数量',
                        type: 'bar',
                        data: countArray
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, true);
            })
            
            //单击饼
            $("#pieBtn").click(function () {
                option = {
                    title: {
                        text: '饼图展示角色功能统计',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: roleArray
                    },
                    series: [
                        {
                            name: '功能数量',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: jsonValue,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                myChart.setOption(option, true);
            })
        })
    </script>
</body>
</html>